<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>SB Admin - Bootstrap Admin Template</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/sb-admin.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="css/plugins/morris.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>
    <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav side-nav">
            <li>
                <a class="navbar-brand" href="#"><img src="static/logo.png"></a>
            </li>
            <li class="active">
                <a href="index.html"><i class="fa fa-fw fa-dashboard"></i> 主页</a>
            </li>
            <li>
                <a href="charts.html"><i class="fa fa-fw fa-bar-chart-o"></i> 数据可视</a>
            </li>
            <li>
                <a href="tables.html"><i class="fa fa-fw fa-table"></i> 招聘/简历</a>
            </li>
            <li>
                <a href="forms.html"><i class="fa fa-fw fa-edit"></i> 餐饮行业</a>
            </li>
            <li>
                <a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-arrows-v"></i> 企业 <i class="fa fa-fw fa-caret-down"></i></a>
                <ul id="demo" class="collapse">
                    <li>
                        <a href="#">时间轴</a>
                    </li>
                    <li>
                        <a href="#">风险预测</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="bootstrap-elements.html"><i class="fa fa-fw fa-desktop"></i> Bootstrap Elements</a>
            </li>
            <li>
                <a href="bootstrap-grid.html"><i class="fa fa-fw fa-wrench"></i> Bootstrap Grid</a>
            </li>
            <li>
                <a href="blank-page.html"><i class="fa fa-fw fa-file"></i> Blank Page</a>
            </li>
            <li>
                <a href="index-rtl.html"><i class="fa fa-fw fa-dashboard"></i> RTL Dashboard</a>
            </li>
        </ul>
    </div>
    <!-- /.navbar-collapse -->


    <!-- wrapper main container -->
    <div id="wrapper">

        <!-- Page Heading -->
        <!-- 项目说明 -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">
                    主页  <small>项目简略说明</small>
                </h1>
                <!-- 分页暂时不使用
                <ol class="breadcrumb">
                    <li class="active">
                        <i class="fa fa-dashboard"></i> Dashboard
                    </li>
                </ol>
                -->
            </div>
        </div>
        <!-- /.row -->

        <div class="row">
            <div class="col-lg-8">
                <h3 class="header">
                    模块   <small>模块功能详细说明</small>
                </h3>
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#charts" aria-controls="charts" role="tab" data-toggle="tab">数据可视化</a></li>
                    <li role="presentation"><a href="#work" aria-controls="work_person" role="tab" data-toggle="tab">招聘/简历</a></li>
                    <li role="presentation"><a href="#food" aria-controls="food" role="tab" data-toggle="tab">饮食行业</a></li>
                    <li role="presentation"><a href="#risk" aria-controls="risk" role="tab" data-toggle="tab">企业风险</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="charts">
                        <p class="content">
                            数据可视化模块是收集的各类数据可视化工具中的各种案例，使用的数据为测试数据，使用的工具为前端图表设计中比较成熟的js工具，
                            目前收集到的案例中主要使用的包括以下三种：D3.js、eChart.js、highChart.js。
                        </p>
                        <p class="content">
                            三种类型的工具中主要包括了两中图表类型：一是常规的数理统计和逻辑关系类的统计图表；二是地理地图信息类图表。
                            统计类图表包括：散点图、折线图、饼图、K线图、雷达图、箱线图、热力图，逻辑关系类的图表包括：关系图、树状图、桑基图、漏斗图。对于地理信息类的图表需要下载相应的
                            地理信息的json文件。
                        </p>
                        <p class="content">
                            而在D3.js中包括一种比较特殊的图表：力学导图，常用来绘制网络关系图表。图表中的交互对于eChart.js、highChart.js需要参照API文档进行配置，对于D3.js
                            具有更高的自由度，不过需要对样式进行设计和css的编写。
                        </p>

                    </div>
                    <div role="tabpanel" class="tab-pane" id="work">
                        <p class="content">
                            招聘/简历模块的主要目标是将爬取到的招聘和简历数据进行统计、整合以及分析后为需求者提供直观有效的数据支持。该模块的数据来源目前有4个：
                            招聘方面有拉勾和51job的招聘信息；简历方面有举贤网和部分58同城信息。
                        </p>
                        <p class="content">
                            该模块从功能上区分主要包括三个方面：一是通过公司名称查询招聘和简历信息，得到公司的概况信息，并通过与整体数据的各维度统计分析，得到公司在行业或地域中的定位（？）；
                            二是监控功能，希望通过对监控公司招聘和简历信息的持续爬取和时间维度变化情况的解析，得到监控公司发展情况（发展方向、人员需求、离职情况）；三是不同行业、不同职位在整体数据
                            中的纵向比较，希望能够提供行业及职位需求变化趋势的数据支持。
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="food">数据爬取中...</div>
                    <div role="tabpanel" class="tab-pane" id="risk">waiting...</div>
                </div>
            </div>
        </div>

        <!-- alter default
        <div class="row">
            <div class="col-lg-12">
                <div class="alert alert-info alert-dismissable">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                    <i class="fa fa-info-circle"></i>  <strong>Like SB Admin?</strong> Try out <a href="http://startbootstrap.com/template-overviews/sb-admin-2" class="alert-link">SB Admin 2</a> for additional features!
                </div>
            </div>
        </div>
        <!-- /.row -->
    </div>
    <!-- end wrapper -->

    <!-- js part-->
    <!-- *******************************************-->
    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Morris Charts JavaScript -->
    <script src="js/plugins/morris/raphael.min.js"></script>
    <script src="js/plugins/morris/morris.min.js"></script>
    <script src="js/plugins/morris/morris-data.js"></script>
    <!-- ********************************************-->

    
</body>
